<template>
  <div class="receiv">
    <!-- 全部1 -->
    <div v-if="isshow">
      <div class="box">
        <ul>
          <!-- 待发货板块 -->
          <li v-for="(item,index) in sendarr" :key="index+'1'">
            <div class="li-header">
              <img :src="item.shop_url" />
              <!-- 店铺 -->
              <span>{{item.shop_title}}</span>
              <span class="spanright">
                <span>待发货</span>
              </span>
            </div>
            <div class="li-center">
              <div>
                <img :src="item.img_url" />
              </div>
              <!-- 商品信息 -->
              <div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="li-bottom">
              <!-- 单价 -->
              <p>单价￥{{item.new_price}}</p>
              <!-- 数量 -->
              <div class="li-num">数量:{{item.num}}</div>
              <span @click="senddel(index)">删除商品</span>
            </div>
          </li>

          <!-- 待收货 -->
          <li v-for="(item,index) in rec" :key="index+'2'">
            <div class="li-header">
              <img :src="item.shop_url" />
              <!-- 店铺 -->
              <span>{{item.shop_title}}</span>
              <span class="spanright">
                <span>待收货</span>
              </span>
            </div>
            <div class="li-center">
              <div>
                <img :src="item.img_url" />
              </div>
              <!-- 商品信息 -->
              <div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="li-bottom">
              <!-- 单价 -->
              <p>单价￥{{item.new_price}}</p>
              <!-- 数量 -->
              <div class="li-num">数量:{{item.num}}</div>
              <span @click="recdel(index)">删除商品</span>
            </div>
          </li>

          <!-- 已有的商品 -->
          <li v-for="(item,index) in arr" :key="index">
            <div class="li-header">
              <img :src="item.shop_url" />
              <!-- 店铺 -->
              <span>{{item.shop_title}}</span>
              <span class="spanright">
                <span>交易成功</span>
              </span>
            </div>
            <div class="li-center">
              <div>
                <img :src="item.img_url" />
              </div>
              <!-- 商品信息 -->
              <div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="li-bottom">
              <!-- 单价 -->
              <p>单价￥{{item.new_price}}</p>
              <!-- 数量 -->
              <div class="li-num">数量:{{item.num}}</div>
              <span @click="del(index)">删除商品</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <noorder></noorder>
    </div>
  </div>
</template>

<script>
import noorder from "../Shop-order/no-order/noorder";
export default {
  components: {
    noorder
  },
  data() {
    return {
      sendarr:[],
      rec:[],
      arr: [
        {
          new_price: 29.9,
          img_url: "http://47.107.35.117/guoguo/gou/img_3.jpg",
          ischeck: false,
          num: 1,
          shop_title: "好食期超市旗舰店",
          shop_url: "http://47.107.35.117/guoguo/gou/shop_3.jpg",
          title: "味滋源休闲零食办公室小吃梅干120gX3袋"
        },
        {
          new_price: 36.8,
          img_url: "http://47.107.35.117/guoguo/gou/img_5.jpg",
          ischeck: false,
          num: 1,
          shop_title: "孜恋旗舰店",
          shop_url: "http://47.107.35.117/guoguo/gou/shop_5.jpg",
          title: "全自动雨伞男折叠女生晴雨两用太阳伞防晒防紫外线遮阳伞大号超大"
        }
      ]
    };
  },
  methods:{
    del(index){
      this.arr.splice(index, 1);
    },
    senddel(index){
      this.sendarr.splice(index,1);
      sessionStorage.setItem("send", JSON.stringify(this.sendarr));
    },
    recdel(index){
      this.rec.splice(index,1);
      sessionStorage.setItem("rec", JSON.stringify(this.recarr));
    }
  },
  computed:{
    isshow(){
      let send = JSON.parse(sessionStorage.getItem("send")) || [];
      let recarr = JSON.parse(sessionStorage.getItem("recarr")) || [];
      this.rec = recarr;
      this.sendarr = send;

      let newshow = true;
      if (this.arr.length == 0) {
        newshow = false;
      } else {
        newshow = true;
      }
      return newshow;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/shopCar/list.scss";
.li-bottom{
  span{
    margin-top: -10px;
  }
}
</style>